<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--iPhone私有标签，它表示：允许全屏模式浏览-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式-->
    <meta name="format-detection" content="telephone=no; email=no" />
    <!--不识别邮件和不把数字识别为电话号码-->
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <link rel="stylesheet" href="./css/front-less/common.css" />
    <link rel="stylesheet" href="./css/front-less/chat-page.css">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>群聊</title>
</head>
<body>
<div class="container-layout" id="chat">
    <div class="chat-body">
        <div class="chat-left">
            <div class="m-header-box">
                <a href="./student-page.html" class="chat-header">
                    <img src="" alt="">
                </a>
                <p class="my-name">大林</p>
                <div class="dot-list">
                    ...
                    <div class="exit">
                        <a href="" class="exit-btn">退出</a>
                    </div>
                </div>
            </div>
            <div class="search-box">
                <input type="text" class="search-linkman" placeholder="查找联系人或者群">
                <span class="layui-icon layui-icon-search"></span>
            </div>
            <div class="tab-g-m">
                <a href="javascript:;" class="cut-btn link-group active">群聊</a>
                <a href="javascript:;" class="cut-btn link-men">私聊</a>
            </div>
            <div class="link-box">
                <div class="link-men-box link-box-style">
                    <ul class="list-style">
                        <li class="link-object active">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">慧慧</p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="link-group-box link-box-style">
                    <ul class="list-style">
                        <li class="link-object active">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object ">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object ">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object ">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object ">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>
                        <li class="link-object ">
                            <img src="" alt="" class="link-obj-header">
                            <div class="rec-inform">
                                <p class="ob-name">ui设计进阶班 <span class="group-num-p">(66)</span></p>
                                <p class="rec-msg">大林你在吗</p>
                            </div>
                            <div class="link-object-r">
                                <p class="send-time">13:30</p>
                                <span class="msg-num">33</span>
                            </div>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <div class="chat-right">
            <div class="chat-top">
                <p class="obj-name">慧慧</p>
                <div class="dot-list-s">
                    ...
                    <div class="chat-obj-fun">
                        <ul class="fun-obj">
                            <li class="fun-obj-d"><a href="javascript:;">查看个人主页</a></li>
                            <li class="fun-obj-d"><a href="javascript:;">取消关注</a></li>
                            <li class="fun-obj-d"><a href="javascript:;" class="shield">屏蔽</a></li>
                            <li class="fun-obj-d"><a href="javascript:;">举报</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="chat-area">
                <div class="send-time-m">
                    <span class="send-time-d">14:10</span>
                </div>
                <div class="l-send msg-style">
                    <a href="./student-page.html" class="s-header">
                        <img src="" alt="">
                    </a>
                    <div class="msg-con">
                        <p class="obj-name-con">大林</p>
                        <div class="msg-con-d">怎么加好友</div>
                    </div>
                </div>
                <div class="r-send msg-style">
                    <a href="./student-page.html" class="s-header">
                        <img src="" alt="">
                    </a>
                    <div class="msg-con">
                        <p class="obj-name-con">大林</p>
                        <div class="msg-con-d">怎么加好友</div>
                    </div>
                </div>
                <div class="r-send msg-style">
                    <a href="./student-page.html" class="s-header">
                        <img src="" alt="">
                    </a>
                    <div class="msg-con">
                        <p class="obj-name-con">大林</p>
                        <div class="msg-con-d">怎么加好友</div>
                    </div>
                </div>
                <div class="no-rec">
                    <span class="send-time-d">您已屏蔽此对话</span>
                </div>
            </div>
            <div class="send-part">
                <textarea class="layui-textarea" id="edit-msg" style="display: none;"></textarea>
                <p class="hint-how-send">按下enter发送内容</p>
            </div>
        </div>
    </div>
</div>
<div id="chat-fun" class="chat-fun" style="display:none">
    <div class="full-shade"></div>
    <div class="group-detail hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">群资料</h3>
            <em class="layui-icon layui-icon-close"></em>
            <div class="model-style">
                <p class="group-name-h">UI设计进阶班</p>
                <p class="group-number">群号：888888</p>
            </div>
            <div class="model-style">
                <p class="group-name-h">群成员</p>
                <ul class="grouper-list">
                    <li class="grouper">
                        <a href="./teacher-page.html" class="grouper-member"><img src="" alt=""> <span class="iden-group-master">群主</span></a>
                        大林
                    </li>
                    <li class="grouper">
                        <a href="./teacher-page.html" class="grouper-member"><img src="" alt=""> <span class="iden-group-manger">管理</span></a>
                        大林
                    </li>
                    <li class="grouper">
                        <a href="./teacher-page.html" class="grouper-member"><img src="" alt=""></a>
                        大林
                    </li>
                    <li class="grouper">
                        <a href="./teacher-page.html" class="grouper-member"><img src="" alt=""></a>
                        大林
                    </li>
                    <li class="grouper">
                        <a href="./teacher-page.html" class="grouper-member"><img src="" alt=""></a>
                        大林
                    </li>
                </ul>
                <a href="javascript:;" class="check-more">查看更多群成员></a>
                <span class="in-all">共145人</span>
            </div>
            <div class="model-style">
                <p class="group-name-h">群公告</p>
                <div class="group-ann">作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种作业要求：艺术是一种</div>
            </div>
            <form action="" class="layui-form">
                <div class="inline-box">
                    <p class="group-name-h inline">我的群名片</p><span class="jump-change-name">大林 <i class="layui-icon layui-icon-right"></i></span>
                </div>
                <div class="inline-box">
                    <p class="group-name-h inline">消息免打扰</p>
                    <div class="layui-input-block">
                        <input type="radio" name="accMsg" value="是" title="是">
                        <input type="radio" name="accMsg" value="否" title="否" checked>
                    </div>
                </div>
                <div class="inline-box">
                    <p class="group-name-h inline">消息免打扰</p>
                    <div class="layui-input-block">
                        <input type="radio" name="upChat" value="是" title="是">
                        <input type="radio" name="upChat" value="否" title="否" checked>
                    </div>
                </div>
            </form>
            <a href="javascript:;" class="exit-group">退出班群</a>
        </div>
    </div>
    <div class="check-grouper hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">下载课程材料</h3>
            <em class="layui-icon layui-icon-close"></em>
            <em class="layui-icon layui-icon-left"></em>
            <div class="check-box">
                <input type="text" class="check-box-g">
                <span class="layui-icon layui-icon-search search-icon"></span>
                <a href="javascript:;" class="cancel">取消</a>
            </div>
            <ul class="search-consult">
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">甄妮</p>
                        <span class="member-iden-mst">群主</span>
                    </a>
                </li>
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">甄妮</p>
                        <span class="member-iden-mag">管理</span>
                    </a>
                </li>
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">大壮</p>
                    </a>
                </li>
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">大林</p>
                    </a>
                </li>
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">大壮</p>
                    </a>
                </li>
                <li class="member">
                    <a href="./student-page.html" class="member-box">
                        <img src="" alt="" class="member-header">
                        <p class="member-name">大林</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="change-name hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">我的群名片</h3>
            <em class="layui-icon layui-icon-close"></em>
            <em class="layui-icon layui-icon-left"></em>
            <p class="hint-change-nick">请输入新的群名片</p>
            <input type="text" placeholder="请输入新的群名片" class="change-nickname">
        </div>
    </div>
</div>
<script src="./js/assets/less.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/front-js/common.js"></script>
<script src="./js/front-js/chat-page.js"></script>
</body>
</html>